<template>
    <teleport to="body">
        <div class="mask" :class="{ none: !isMask }" v-show="props.show">
            <div ref="mask_box" class="mask-box" :class="paddingType" :style="style">
                <div class="mask-title" v-if="props.isTitle">
                    {{ props.title }}
                </div>
                <div class="mask-close" v-if="props.isClose" @click="onClose"></div>
                <div class="mask-back" v-if="props.isBack" @click="onBack"></div>
                <slot></slot>
            </div>
        </div>
    </teleport>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import DomDrag from "@/comm/DomDrag";
const props = defineProps({
    show: {
        type: Boolean,
        required: true
    },
    title: {
        type: String,
        default: ""
    },
    isBack: {
        type: Boolean,
        default: false
    },
    isClose: {
        type: Boolean,
        default: true
    },
    isTitle: {
        type: Boolean,
        default: true
    },
    // isPadding: {
    //     type: Boolean,
    //     default: true
    // },
    paddingType: {
        type: String,
        default: "padding" //padding spadding
    },
    isMask: {
        type: Boolean,
        default: true
    },
    style: {
        type: Object,
        default: {}
    },
    mouseMove: {
        type: Boolean,
        default: false
    }
});
const emits = defineEmits(["close", "back"]);

const onClose = () => {
    emits("close");
};

const onBack = () => {
    emits("back");
};
const mask_box = ref();
onMounted(() => {
    if (props.mouseMove) {
        DomDrag.setDrag(mask_box.value);
    }
});
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
